import type { ActionType, ProColumns } from '@/components/Pro/';
import { ProTable } from '@/components/Pro/';
import { batteryFaultControllerGetCollectProblem as getList } from '@/services/ess/diagnosisBatteryfault';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { useIntl } from '@umijs/max';
import type { DatePickerProps } from 'antd';
import moment from 'moment';
import React, { useRef } from 'react';
import './Common.less';

const TableList: React.FC<{
  history?: boolean;
  clusterInfo: API.DeviceInfo[];
}> = ({ history, clusterInfo }) => {
  const actionRef = useRef<ActionType>();

  const intl = useIntl();

  const disabledDate: DatePickerProps['disabledDate'] = (current, { from }) => {
    const disabled = current && current > moment().subtract(1, 'days').endOf('day');

    if (from) {
      return disabled || Math.abs(current.diff(from, 'years')) >= 1;
    }

    return disabled;
  };

  const columns: ProColumns<API.CollectProblemResponse>[] = [
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.location' }),
      dataIndex: 'codes',
      valueType: 'treeSelect',
      hideInTable: true,
      fieldProps: {
        treeData: clusterInfo,
        fieldNames: {
          label: 'name',
          value: 'code',
          children: 'children',
        },
        multiple: true,
        maxTagCount: 'responsive',
        showSearch: true,
        treeNodeFilterProp: 'name',
        maxCount: 100,
      },
    },
    {
      title: intl.formatMessage({ id: 'global.s/N' }),
      dataIndex: 'pageIndex',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.collectionTime' }),
      dataIndex: 'ssDatetime',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.abnormalType' }),
      dataIndex: 'qsType',
      params: {
        code: DATABASE_TYPE_ENUM.COLLECTION_EXCEPTION_TYPE,
      },
      request: () => fetchDictInfo(DATABASE_TYPE_ENUM.COLLECTION_EXCEPTION_TYPE),
      valueType: 'select',
    },
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.occurrenceCollectionTime' }),
      dataIndex: 'modifyTime',
      valueType: 'dateRange',
      initialValue: [moment().subtract(31, 'days'), moment().subtract(1, 'days')],
      fieldProps: {
        disabledDate: disabledDate,
        allowClear: false,
      },
      search: {
        transform: (value) => {
          return {
            ssDateStart: value[0],
            ssDateEnd: value[1],
          };
        },
      },
      hideInTable: true,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryBoxName' }),
      dataIndex: 'boxName',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryStackName' }),
      dataIndex: 'baName',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryClusterName' }),
      dataIndex: 'clusterName',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.nodeLocation' }),
      dataIndex: 'location',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.problemDescription' }),
      dataIndex: 'desc',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'diagnosticPrediction.diagnosis.omAdvice' }),
      dataIndex: 'tips',
      hideInSearch: true,
      width: 220,
    },
  ];

  return (
    <div>
      <ProTable<API.CollectProblemResponse, API.PageParams>
        headerTitle=" "
        actionRef={actionRef}
        rowKey="id"
        request={getList}
        params={
          history
            ? {
                isSolve: 3,
              }
            : {}
        }
        columns={columns}
        search={{
          className: 'searchPosInline',
        }}
        toolbar={{
          className: 'toobalrZindex',
          actions: [
            // eslint-disable-next-line react/button-has-type
          ],
        }}
      />
    </div>
  );
};
export default TableList;
